<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="searchWrap">
        <div class="searchBox"><span>工单类型：</span>
          <div @click="selectAll('activeNum')"
               class="searchItem"
               :class="activeNum===null ? 'active':''">全部
          </div>
          <div @click="searchByType(item,index)" class="searchItem"
               :class="activeNum === index ? 'active':''" v-for="(item,index) in workTicketTypeList"
               :key="item">{{ item }}
          </div>
        </div>
      </div>
    </el-card>
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form :model="where" class="ele-form-search" label-width="77px" @keyup.enter.native="reload"
               @submit.native.prevent>

        <el-row :gutter="15">
          <el-col :lg="6" :md="12">
            <el-form-item label="工单信息:">
              <el-input v-model="where.number" clearable placeholder="请输入工单编号"/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <div class="ele-form-actions">
              <el-button v-if="permission.includes('sys:workTickets:index')" class="ele-btn-icon" icon="el-icon-search"
                         type="primary" @click="reload">
                查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table ref="table" :columns="columns" :datasource="url" :selection.sync="selection" :where="where"
                     height="calc(100vh - 390px)">
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <div style="margin-right: 20px;">
            <el-button-group>
              <el-button @click="selectBefore" :class="btnBefore?'btnActive':''">未回访</el-button>
              <el-button @click="selectAfter" :class="btnAfter?'btnActive':''">已回访</el-button>
            </el-button-group>
          </div>
          <div class="btnWrap" v-if="permission.includes('sys:workTickets:export')">
            <download-excel
              class="export-excel-wrapper"
              :data="selection"
              :fields="json_fields"
              :header="title"
              name="回访工单.xls"
            >
              <el-button size="small" type="primary" :disabled="!selection.length"
                         >导出
              </el-button>
            </download-excel>
          </div>
          <div class="btnWrap">
            <el-button size="small" :loading="exportLoading" type="primary"
                       v-if="permission.includes('sys:workTickets:export')" @click="exportAll">导出全部
            </el-button>
          </div>
        </template>
        <!--工单编号-->
        <template slot="wo_number" slot-scope="{row}">
          <span style="cursor: pointer;color: var(--color-primary);"
                @click="$router.push('/workTickets/workTickets/info?id=' + row.id)">
            {{ row.wo_number }}
          </span>
        </template>

        <!--创建方式-->
        <template slot="createType">
          <span>客服创建</span>
        </template>
        <!--派单人-->
        <template slot="dispatch" slot-scope="{row}">
          <span >{{row.logs.length>=2?row.logs[1].creator:''}}</span>
        </template>
        <!--产品-->
        <template slot="products" slot-scope="{row}">
          {{ formProducts(row) }}
        </template>
        <!--地址-->
        <template slot="address" slot-scope="{row}">
          <span>{{ row.province_name }} {{ row.city_name }} {{ row.county_name }} {{ row.address }}</span>
        </template>
        <!--负责人-->
        <template slot="master" slot-scope="{row}">
          <span>{{ formMaster(row) }}</span>
        </template>
        <!--协调人-->
        <template slot="synergistic_people" slot-scope="{row}">
          <span>{{ formSynergistic_people(row) }}</span>
        </template>
        <!--回访审核-->
        <template slot="action" slot-scope="{row}" title="工单回访" :destroy-on-close="true">
          <el-link :underline="false" type="primary"

                   v-if="row.show_callback"
                   @click="openReturn(row.id)">
            回访
          </el-link>
          <el-link :underline="false" type="primary"
                   v-if="!row.show_callback&&row.callback_show.length"
                   @click="showReturn(row.callback_show)">
            查看
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <el-dialog
      destroy-on-close
      title="查看回访"
      :visible.sync="showReturnFlag"
      width="50%">
      <div class="audit-info">
        <div v-for="item in this.currentReturnInfo " :key="item.time">
          <div class="divider-wrap">
            <el-divider content-position="left">
              <span>  回访时间：{{ item.time }}  &nbsp; 回访人：{{ item.auditor }}</span></el-divider>

          </div>
          <div class="audit-content">{{ item.content }}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="exit">取 消</el-button>
        <el-button @click="exit" type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <Return ref="return" :returnVisible="returnVisible" :id="currentId" @done="done" @cancel="cancel"/>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import Return from './compoents/index.vue'

export default {
  components: {
    Return
  },
  computed: {
    ...mapGetters(["permission"])
  },
  data() {
    return {
      exportLoading:false,
      //回访信息
      currentReturnInfo: [],
      exportAllFlag: false,
      allExportData: [],
      title: "嘉盛环境工单表格",
      json_fields: {
        "工单编号": 'wo_number',
        "工单类型": 'type',
        "客户": 'customer.name',

        "联系人": {
          field: "contact_name",
          //自定义回调函数
          callback: value => {
            return value + ' '
          }
        },
        "电话": 'contact_phone',
        "客户地址": 'customer.detail_address',
        "出厂编号": {
          field: "products",
          //自定义回调函数
          callback: value => {
            return `${(value.map(item => {
              return item.product.name
            })).join(',')}`;
          }
        },
        "产品编号": {
          field: "products",
          //自定义回调函数
          callback: value => {
            return `${(value.map(item => {
              return item.product.product_number
            })).join(',')}`;
          }
        },
        "质保开始时间": {
          field: "products",
          //自定义回调函数
          callback: value => {
            return `${(value.map(item => {
              return item.product.warranty_start_date
            })).join(',')}`;
          }
        },
        "质保结束时间": {
          field: "products",
          //自定义回调函数
          callback: value => {
            return `${(value.map(item => {
              return item.product.warranty_end_date
            })).join(',')}`;
          }
        },
        "质保状态": {
          field: "products",
          //自定义回调函数
          callback: value => {
            return `${(value.map(item => {
              return item.product.warranty_status_title
            })).join(',')}`;
          }
        },
        "优先级": 'level',
        "服务类型": 'service_type',
        "服务内容": 'service_content',
        "计划时间": 'plan_at',

        "备件名称": 'remark',
        "备件编号": 'remark',
        "备件类别": 'remark',
        "备件规格": 'remark',
        "备件数量": 'remark',
        "备件价格": 'remark',
        "服务项目": 'remark',
        "服务类别": 'remark',
        "服务项目数量": 'remark',
        "服务项目金额": 'remark',
        "工单总价": 'remark',
        "折扣费用": 'remark',
        "工单合计": 'remark',

        "工单状态": 'status',
        "创建人": 'create_user.realname',
        "派单人": {
          field: "logs",
          //自定义回调函数
          callback: value => {
            if (value[1]) {
              return value[1].creator
            }
          }
        },
        "负责人": {
          field: "users",
          //自定义回调函数
          callback: value => {
            return `${(value.filter(item => {
              return item.is_master === 1
            }))[0].user.realname}`;
          }
        },
        "审核人": {
          field: "audit_show",
          //自定义回调函数
          callback: value => {
            return `${(value.map(item => {
              return item.auditor
            })).join(',')}`;
          }
        },
        "服务网点": 'customer.department_name',
        "协同人": {
          field: "users",
          //自定义回调函数
          callback: value => {
            return `${(value.filter(item => {
              return item.is_master === 0
            })).map(item => {
              return item.user.realname
            }).join(',')}`;
          }
        },
        "创建时间": 'create_time_format',
        "派单时间": {
          field: "logs",
          //自定义回调函数
          callback: value => {
            if (value[1]) {
              return value[1].create_time
            }
          }
        },
        "接受时间": {
          field: "logs",
          //自定义回调函数
          callback: value => {
            if (value[2]) {
              return value[2].create_time
            }
          }
        },
        "开始时间": {
          field: "logs",
          //自定义回调函数
          callback: value => {
            if (value[3]) {
              return value[3].create_time
            }
          }
        },

        "转派时间": 'remark',

        "完成时间": {
          field: "logs",
          //自定义回调函数
          callback: value => {
            if (value[4]) {
              return value[4].create_time
            }
          }
        },

        "审核状态": {
          field: "audit_show",
          //自定义回调函数
          callback: value => {
            if (value.length === 0) {
              return '未审核'
            } else if (value.length === 1) {
              return '一级'
            } else if (value.length === 2) {
              return '二级'
            }
          }
        },
        "回访时间": 'callback_show[0].time',
      },
      //查看回访
      showReturnFlag: false,
      //对话框
      returnVisible: false,
      currentId: null,
      //回访内容
      returnData: {},
      typeList: [
        "安装工单",
        "设备维修",
        "维保工单",
        "巡检工单",
      ],
      // 表格数据接口
      url: '/wos?callbacked=0',
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          slot: 'wo_number',
          label: '工单编号',
          width: 150,
          align: 'center',
          showOverflowTooltip: true,
        },
        {
          prop: 'type',
          label: '工单类型',
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center',
        },
        {
          prop: 'customer.name',
          label: '客户',
          showOverflowTooltip: true,
          minWidth: 150,
          align: 'center'
        },
        {
          prop: 'contact_name',
          label: '联系人',
          align: 'center',
          showOverflowTooltip: true,
          width: 100
        },

        {
          prop: 'contact_phone',
          label: '电话',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center'
        },
        {
          slot: 'address',
          label: '客户地址',
          showOverflowTooltip: true,
          minWidth: 250,
          align: 'center'
        },
        {
          slot: "products",
          label: '产品',
          showOverflowTooltip: true,
          minWidth: 150,
          align: 'center'
        },
        {
          prop: 'plan_at',
          label: '计划时间',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center'
        },
        {
          slot: 'master',
          label: '负责人',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          slot: 'synergistic_people',
          label: '协同人',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center'
        },
        {
          prop: 'status',
          label: '工单状态',
          minWidth: 160,
          align: 'center',
        },
        {
          prop: 'create_user.nickname',
          label: '创建人',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center',
        },
        {
          prop: 'create_time_format',
          label: '创建时间',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center',
        },
        {
          slot: 'dispatch',
          label: '派单人',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center',
        },
        {
          slot: 'createType',
          label: '创建方式',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center',

        },
        {
          columnKey: 'action',
          label: '操作',
          width: 150,
          align: 'center',
          resizable: false,
          slot: 'action',
          fixed: "right"
        }
      ],
      rules: {
        content: [
          {required: true, message: "请输入回访内容", trigger: "blur"}
        ]
      },
      loading: false,
      //显示新增联系人
      showCustomerUserEdit: false,
      //显示编辑选项
      isEditType: false,
      // 表格搜索条件
      where: {},
      // 表格选中数据
      selection: [],
      //当前编辑的类型
      type: null,
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 二维码是否显示编辑弹窗
      codeEdit: false,
      // 当前编辑数据
      currentCode: null,
      // 是否显示导入弹窗
      showImport: false,
      //客户id
      customer_id: null,
      //客户名字
      customer_name: null,
      //状态搜索激活
      activeNum: null,
      //工单类型筛选
      workTicketTypeList: [],
      //类型搜索激活
      statusActiveNum: null,
      //按钮标志
      btnAfter: false,
      btnBefore: true,
    };
  },
  mounted() {
    this.$http.get(`wos/params`,).then((res) => {
      this.workTicketTypeList = res.data.data.wo_types
    });
  },
  methods: {
    /*导出全部*/
    exportAll() {
      this.exportLoading = true
      if (this.btnBefore) {
        this.query = {callbacked: 0, ...this.where}
      } else if (this.btnAfter) {
        this.query = {callbacked: 1, ...this.where}
      } else {
        this.query = {...this.where}
      }
      this.$http.get(`wos?export=1`,{params:this.where}).then((res) => {
        this.exportLoading = false
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          const link = document.createElement('a')
          //_blank表示在新窗口打开链接
          // link.target = '_blank'
          link.href = res.data.data
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
    //关闭查看回访弹窗
    exit() {
      this.showReturnFlag = false
    },
    //打开查看回访弹窗
    showReturn(data) {
      this.currentReturnInfo = data
      this.showReturnFlag = true
    },
    //上面筛选
    selectAll() {
      this.activeNum = null
      this.where.type = ''
      this.reload()
    },
    //取消回访
    cancel() {
      this.returnVisible = false
    },
    //完成回访
    done() {
      this.returnVisible = false
      this.reload();
    },
    //工单回访
    openReturn(id) {
      this.currentId = id
      this.returnVisible = true
    },
    //选择未回访
    selectBefore() {
      this.url = '/wos?callbacked=0'
      this.btnAfter = false
      this.btnBefore = true
    },
    //选择已回访
    selectAfter() {
      this.url = '/wos?callbacked=1'
      this.btnBefore = false
      this.btnAfter = true
    },
    //根据工单类型搜索
    searchByType(item, index) {
      this.activeNum = index
      this.handelTypeSearch(item)
    },
    //工单类型搜索
    handelTypeSearch(item) {
      this.where.type = item
      this.reload()
    },
    //数据处理
    formProducts(row) {
      return (row.products.map(item => {
        return item?.product?.name
      })).join(' ')
    },
    formMaster(row) {
      if (row.users.filter((item) => {
        return item.is_master === 1
      })) {
        if (((row.users.filter((item) => {
          return item.is_master === 1
        }))[0])) {
          return (((row.users.filter((item) => {
            return item.is_master === 1
          }))[0]).user).realname
        }
      }
    },
    formSynergistic_people(row) {
      return ((row.users.filter((item) => {
        return item.is_master === 0
      })).map(item => {
        return item.user.realname
      })).join(' ')
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    /* 重置搜索 */
    reset() {
      this.url = '/wos?callbacked=0'
      this.btnAfter = false
      this.btnBefore = true
      this.activeNum = null
      this.statusActiveNum = null
      this.type = ''
      this.isEditType = false;
      this.where = {};
      this.reload();
    },

  }
}
</script>

<style scoped lang="scss">
.searchWrap {

}

.active {
  background: #dcf3fd;
  border-color: #d0f3f4;
  color: #02aef3;
  padding: 4px 8px;
}

.searchBox {
  display: flex;

  span {
    color: #a7b5b5;
    display: block;
    width: 110px;
    height: 36px;
    font-size: 16px;
  }

  .searchItem {
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 13px;
    margin: 0 12px 8px 0;
    max-width: 160px;
    overflow: hidden;
    padding: 4px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    font-size: 14px;
  }
}

.btnActive {
  background-color: var(--color-primary);
  color: #fff;
}

//查看回访样式
.audit-info {
  margin: 50px 0 0 5px;

  .audit-content {
    padding: 20px;
    padding-left: 50px;
    height: 160px !important;
  }
}

.divider-wrap {
  padding: 10px;
  width: 100%;

  .el-divider ::v-deep span {
    color: #ccc;
  }
}

.btnWrap {
  display: flex;

  .el-button {
    margin-right: 20px;
  }
}
</style>
